<template>
  <div class="chart-container">
    <div class="chart-box">
      <div class="chart-title">
        <p>单位支出雷达图</p>
        <el-tooltip class="item" effect="dark" content="图表是基于预算、支出、实际的数据" placement="bottom-start">
          <svg-icon class="tishi" icon-class="exclamation-circle" />
        </el-tooltip>
      </div>

      <chart
        :series-data="raddarChartData.seriesData"
        :redir-indicator="raddarChartData.redirIndicator"
        :legend-data="raddarChartData.legendData"
        height="100%"
        width="100%"
      />
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/RaddarChart'
export default {
  name: 'Raddar',
  components: { Chart },
  data() {
    return {
      raddarChartData: { // 雷达图数据
        redirIndicator: [ // 六个角
          { name: '销售', max: 10000 },
          { name: '管理', max: 20000 },
          { name: '信息技术', max: 20000 },
          { name: '用户支持', max: 20000 },
          { name: '开发', max: 20000 },
          { name: '促销', max: 20000 }
        ],
        legendData: ['预算', '支出1', '实际'], // 图例
        seriesData: [{ // 图表数据
          value: [5000, 7000, 12000, 11000, 15000, 14000],
          name: '预算'
        },
        {
          value: [4000, 9000, 15000, 15000, 13000, 11000],
          name: '支出1'
        },
        {
          value: [5500, 11000, 12000, 15000, 12000, 12000],
          name: '实际'
        }]

      }
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.chart-box {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
}
.chart-title {
    position: absolute;
    // top: 15px;
    z-index: 99;
    color: #636363;

    p {
        display: inline-block;
        margin-right: 6px;
        font-size: 20px;
        font-weight: 600;
        vertical-align: middle;
        margin: 0;
    }
    .tishi {
        display: inline-block;
        vertical-align: middle;
        color: #aaaaaa;
    }
}

.top {
    text-align: center;
}

.left {
    float: left;
    width: 60px;
}

.right {
    float: right;
    width: 60px;
}

.bottom {
    clear: both;
    text-align: center;
}

.item {
    margin: 4px;
}

.left .el-tooltip__popper,
.right .el-tooltip__popper {
    padding: 8px 10px;
}
</style>

